<template>
<!-- 	<button @click="autoSet()">自动生成测试样例</button> -->
	<view style="height: 100vh;align-items: center;display: flex;flex-direction: column;">
		<!-- 模块一，设定事件名称 -->
		<view class="inputItem">
			<text class="title">事件名称 Title</text>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<input-box>
					<input type="text" placeholder="请输入事件名称" class="in" v-model="name"/>
					<image src="../../static/shezhi-2.png" mode="aspectFit" class="icon"></image>
				</input-box>
			</view>
		</view>
		
		<!-- 模块二，设定起始和终止日期 -->
		<view class="dateSet">
			<text class="title">日期设定 Date</text>
			<text class="title2">设定起始日期 Set initial date</text>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<input-box>
					<picker mode="date" :value="date1" @change="setBeg($event)" class="in">
						{{date1}}
					</picker>
					<image src="../../static/rili-2.png" mode="aspectFit" class="icon"></image>
				</input-box>
			</view>
			
			<text class="title2">设定终止日期 Set termination date</text>
			<view style="display: flex;flex-direction: column;align-items: center;">
				<input-box>
					<picker mode="date" :value="date2" @change="setEnd($event)" class="in">
						{{date2}}
					</picker>
					<image src="../../static/gongzuojihua.png" mode="aspectFit" class="icon"></image>
				</input-box>
			</view>
			<text class="title2">本次计划用时 {{dayComputed}} 天</text>
		</view>	
		
		<!-- 模块三，添加事件描述 -->
		<view class="eventDiscription">
			<text class="title">事件描述 discription</text>
			<view class="disciptionAndButton">
				<textarea placeholder="开始输入" class="editor" v-model="Description"></textarea>
			</view>
		</view>
		<button class="button" @click="submitForm();"><text>提交事件</text></button>
	</view>
	
</template>

<script setup>
import { computed, ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import db from '../../util/db';
import mydate from '../../util/mydate';
const date1 = ref(mydate.todayString());
const date2 = ref(mydate.todayString());
const name = ref("");
const Description = ref("");
const obj = ref();
const isModify = ref(0);
function autoSet(){
    let eventData = {
        name: "测试",
        begin: date1.value, // 假设date1.value已经是一个有效的日期字符串
        end: "2025-1-15",   // 假设date2.value已经是一个有效的日期字符串
		description: "测试数据",
    };
	console.log(eventData)
	for(let i=0;i<100;i++)
	{
		db.addEvent(eventData);
	}
}
onLoad(async (e)=>{
	if(e.id!=undefined)
	{
		const cobj = await db.selectOneEvent(e.id);
		obj.value = cobj[0];
		date1.value = obj.value.begin;
		date2.value = obj.value.end;
		name.value = obj.value.name;
		Description.value = obj.value.description;
		isModify.value = 1;
	}
	else if(e.did!=undefined)
	{
		const cobj = await db.selectOneDoneEvent(e.did);
		obj.value = cobj[0];
		date1.value = obj.value.begin;
		date2.value = obj.value.end;
		name.value = obj.value.name;
		Description.value = obj.value.description;
		isModify.value = 2;
	}
	// 预先设定日期
	else if(e.date!=undefined)
	{
		console.log(e);
		if(mydate.dayComputed(mydate.todayString(),e.date) > 0)
		{
			date2.value = e.date; 
		}
		else
		{
			date1.value = e.date; 
		}
	}
})
// 定义日期的天数计算
const dayComputed = computed(()=>{
	const datebeg = new Date(date1.value.replace(/-/g, '/')); // 有些浏览器可能不支持"YYYY-MM-DD"格式，所以替换为"YYYY/MM/DD"
	const dateend = new Date(date2.value.replace(/-/g, '/'));
	// 计算时间戳的差值（毫秒）
	const timeDifference = (dateend - datebeg);
	// 将毫秒数转换为天数
	const daysDifference = Math.round(timeDifference / (1000 * 60 * 60 * 24));
	return daysDifference;
})
// 更新起始日期和终止日期
function setBeg(e)
{
	date1.value = e.detail.value;
}
function setEnd(e)
{
	date2.value = e.detail.value;
}
// 提交事件按钮触发
async function submitForm() {
    // 获取输入字段的值
    const nameValue = name.value.trim(); // 去除前后空格
    const descriptionValue = Description.value.trim(); // 去除前后空格
 
    // 验证输入字段
    if (!nameValue) {
		plus.nativeUI.alert("事件名称不能为空!")
        return; // 阻止表单提交
    }
    if (dayComputed.value < 0) {
		plus.nativeUI.alert("日期差必须是一个非负整数!")
        return; // 阻止表单提交
    }
    if (!descriptionValue) {
		plus.nativeUI.alert("请提供描述!")
        return; // 阻止表单提交
    }
    // 如果所有验证都通过，则创建事件数据对象
    let eventData = {
        name: nameValue,
        begin: date1.value, // 假设date1.value已经是一个有效的日期字符串
        end: date2.value,   // 假设date2.value已经是一个有效的日期字符串
		description: descriptionValue,
    };
	if(isModify.value == 0)
	{
		console.log(eventData);
		await db.openDatabase();
		await db.addEvent(eventData);
	}
	else if(isModify.value == 1)
	{
		eventData.id = obj.value.id;
		console.log("更改后的数据为",eventData);
		await db.updateEvent(eventData);
	}
	else if(isModify.value == 2)
	{
		eventData.id = obj.value.id;
		console.log("更改后的数据为",eventData);
		await db.updateDoneEvent(eventData);
	}
	await db.closeDatabase();
	console.log("跳回");
	uni.navigateBack();
}
// 弹窗对应代码块
const message = ref(null);
const errorType = ref("");
// 打开对话框的方法
function openAlertDialog() {
  if (message.value) {
    message.value.open("top");
  }
}
</script>

<style lang="scss" scoped>
.icon{
	flex:1;
}
.in{
	left: 35rpx;
	flex: 9;
	font-size: 36rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
	color: rgba(18, 23, 93, 1);
	text-align: left;
}
.title{
	display: block;
	font-size: 35rpx;
	font-weight: 700;
	letter-spacing: 0rpx;
	color: rgba(18, 23, 93, 1);
	text-align: left;
	padding-left:10rpx;
	margin-top: 40rpx;
}
.inputItem{
	width:680rpx;
	margin-bottom: 10rpx;
	display: flex;
	flex-direction: column;
}
.dateSet{
	width:680rpx;
	.title2{
		padding-left:10rpx;
		font-size: 30rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		color: rgba(18, 23, 93, 1);
		text-align: left;
		margin-bottom: 10rpx;
		margin-top: 50rpx;
	}
}
.eventDiscription{
	width:680rpx;
	flex:1;
	.disciptionAndButton{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.editor{
		width: 660rpx;
		font-size: 40rpx;
		border-top: 1rpx solid black;
		padding-top: 15rpx;
		margin-top: 20rpx;
	}
}
.button{
	width: 630rpx;
	height: 100rpx;
	opacity: 1;
	border-radius: 200rpx;
	background: rgba(36, 107, 253, 1);
	box-shadow: 8rpx 16rpx 48rpx  rgba(36, 107, 253, 0.25);
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
	position: fixed;
	left: 50%;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%); 
	text{
		margin-top: 22rpx;
		font-size: 35rpx;
		font-weight: 400;
		letter-spacing: 0.32rpx;
		line-height: 52rpx;
		color: rgba(255, 255, 255, 1);
	}
}
.error{
	font-size: 40rpx;
	font-weight: 400;
	letter-spacing: 3rpx;
	color: red;
	flex:1;
	align-items: center;
}
</style>